<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload = function () {
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				createPolygon(50,50,5,40,cxt);
				
				function createPolygon(dx, dy, n, size, cxt) {
					cxt.beginPath();
					for(var i=0;i<n;i++){
						var x=size * Math.cos(i * 2 * Math.PI/n)+dx;
						var y=size * Math.sin(i * 2 * Math.PI/n)+dy;
						cxt.lineTo(x,y);
					}
					cxt.fillStyle = "red";
					cxt.fill();
					cxt.closePath();
				}
				
				cnv.addEventListener("mousedown", downfun);
				
				function downfun(e){
					var x = e.clientX;
					var y = e.clientY;
					if (cxt.isPointInPath(x,y)){
						cnv.addEventListener("mousemove",movefun);
					}
					cnv.addEventListener("mouseup",upfun);
				}
				
				function movefun(e){
					movex = e.clientX;
					movey = e.clientY;
					cxt.clearRect(0,0,cnv.width,cnv.height);
					createPolygon(movex, movey, 5, 40, cxt);
				}
				
				function upfun(e){
					cnv.removeEventListener("mousemove",movefun);
				}
			}
			
			
			
		</script>
	</head>
	<body>		
		<canvas id="canvas" width="400" height="300" style="border:1px solid silver;"></canvas>
		
	</body>
</html>
